<template>
  <div>
    <div>
      <label for="orderNo">订单号：</label>
      <input id="orderNo" v-model="num" />
      <button @click="find">查询</button>
      <div v-show="isshow">
        <Productformation :goodInfo="goodInfo">
          <template #aaa>
            <img :src="goodInfo.desc" alt="" width="200px" />
          </template>
        </Productformation>
        <LogisticsFormation
          :logisticsInfo="logisticsInfo"
          :personal="personal"
        ></LogisticsFormation>
      </div>
    </div>
    <div class="logistics-info"></div>
  </div>
</template>

<script>
import Productformation from './components/Productformation.vue'
import LogisticsFormation from './components/LogisticsFormation.vue'
export default {
  components: {
    Productformation,
    LogisticsFormation,
  },
  data() {
    return {
      num: '',
      isshow: false,
      personal: {
        orderNo: this.currentOrderNo,
        role: 'admin', // 角色 ==> 用于判断是否有查看用户详情的权限
        logisticsStatus: 2, // 0 未发货 1 已发货 2 已签收 3 未签收
        logisticsCompany: '顺丰速运', // 快递公司的名称
        logisticsNo: 'SF123456789', // 快件运单号
      },
      logisticsInfo: [
        {
          time: '2023-02-01 10:00:00', // 时间
          content: '快件已发货', // 快递状态
        },
        {
          time: '2023-02-02 09:00:00',
          content: '快件到达深圳中心',
        },
        {
          time: '2023-02-03 08:00:00',
          content: '快件派送中',
        },
        {
          time: '2023-02-04 16:00:00',
          content: '已签收',
        },
      ],
      goodInfo: {
        // 商品信息
        goodNo: '12345678912312', // 商品id
        goodName: '三体', // 商品名称
        type: 0, // 0 代表的是文本 1代表的是 图片

        // desc 描述 ==> 可以是图片 也可以是其他的东西。数据可以随便改
        desc: '	http://registakeaway.itheima.net/common/download?name=9b978122-179a-4b0e-891b-595d0cd3d875.jpg',
      },
    }
  },
  methods: {
    find() {
      this.num = ''
      setTimeout(() => {
        this.isshow = true
      }, 1000)
    },
  },
}
</script>
<style scoped></style>
